<template>
  <!-- 概览时的菜单 -->
  <t-menu v-show="statusStore.status === Status.Dashboard" v-model:expanded="expanded" default-value="dashboard"
    expand-mutex :collapsed="collapsed">
    <t-menu-item value="dashboard" to="/dashboard">
      <template #icon><t-icon name="dashboard" /></template>
      概览
    </t-menu-item>

    <t-menu-item value="serverManage" to="/serverList">
      <template #icon><t-icon name="system-application" /></template>
      服务器管理
    </t-menu-item>

    <t-menu-item value="log" to="/log">
      <template #icon><t-icon name="catalog" /></template>
      日志
    </t-menu-item>

    <t-submenu value="user">
      <template #icon><t-icon name="user-circle" /></template>
      <template #title><span>用户管理</span></template>
      <t-menu-item value="3-2" to="/user/info"> 个人信息 </t-menu-item>
      <t-menu-item value="3-3" to="/login"> 退出登录 </t-menu-item>
    </t-submenu>

    <template #operations>
      <t-button variant="text" shape="square" @click="changeCollapsed">
        <template #icon><t-icon name="view-list" /></template>
      </t-button>
    </template>
  </t-menu>

  <!-- 对某一服务器进行管理的菜单 -->
  <t-menu v-show="statusStore.status === Status.Server" v-model:expanded="expanded" default-value="overview"
    expand-mutex :collapsed="collapsed">


    <t-menu-item value="overview" :to="{ name: 'serverOverview', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="control-platform" /></template>
      概览
    </t-menu-item>

    <t-menu-item value="network" :to="{ name: 'serverNetwork', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="internet" /></template>
      网络
    </t-menu-item>

    <t-menu-item value="service" :to="{ name: 'serverService', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="app" /></template>
      服务
    </t-menu-item>

    <t-menu-item value="user" :to="{ name: 'serverUser', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="user" /></template>
      用户
    </t-menu-item>

    <t-menu-item value="log" :to="{ name: 'serverLog', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="system-log" /></template>
      日志
    </t-menu-item>

    <t-menu-item value="terminal" :to="{ name: 'serverTerminal', params: { id: statusStore.currentServerId } }">
      <template #icon><t-icon name="terminal" /></template>
      终端
    </t-menu-item>


    <t-submenu value="tools">
      <template #icon><t-icon name="tools" /></template>
      <template #title><span>工具</span></template>
      <t-menu-item value="shutdown"><template #icon><t-icon name="poweroff" /></template> 关机 </t-menu-item>
      <t-menu-item value="reboot"><template #icon><t-icon name="refresh" /></template> 重启 </t-menu-item>
    </t-submenu>

    <template #operations>
      <t-button variant="text" shape="square" @click="changeCollapsed">
        <template #icon><t-icon name="view-list" /></template>
      </t-button>
    </template>
  </t-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStatusStore } from '@/stores/index.ts'
import type { MenuProps, ButtonProps } from 'tdesign-vue-next'
import { Status } from '@/types'

const statusStore = useStatusStore()

const collapsed = ref(false)
const changeCollapsed: ButtonProps['onClick'] = () => {
  collapsed.value = !collapsed.value
}

const expanded = ref<MenuProps['expanded']>(['2', '3'])
</script>

<style lang="less" scoped>
.t-demo-collapse-btn {
  color: #fff;

  &:hover {
    background-color: #4b4b4b;
    border-color: transparent;
    --ripple-color: #383838;
  }
}
</style>
